<template>
	<view class="container" style="padding: 20rpx;background-color: #fff;height: 100%;">

		<uni-forms ref="form" :modelValue="entity" label-width="130px">
			<uni-forms-item class="formItem" label="原密码:" name="oldPwd" :rules="$rules.handle.oldPwd" required>
				<uni-easyinput type="password" prefixIcon="locked-filled" v-model="entity.oldPwd" placeholder="请输入原密码"
					:adjust-position="false" />
			</uni-forms-item>
			<uni-forms-item class="formItem" label="新密码:" name="newPwd" :rules="$rules.handle.newPwd" required>
				<uni-easyinput type="password" prefixIcon="locked-filled" v-model="entity.newPwd" placeholder="请输入新密码"
					:adjust-position="false" />
			</uni-forms-item>
			<uni-forms-item class="formItem" label="确认密码:" name="newPwd1" :rules="$rules.handle.newPwd1" required>
				<uni-easyinput type="password" prefixIcon="locked-filled" v-model="entity.newPwd1"
					placeholder="请再次确认新密码" :adjust-position="false" />
			</uni-forms-item>
		</uni-forms>
		<view class="submitButton">
			<u-button type="primary" @click="handleSubmitDetailSave" :loading="loading">变更</u-button>
		</view>

	</view>
</template>

<script>
	import {
		regPhone
	} from '../../utils/regExp.js'
	import {
		mapState
	} from "vuex";
	import {
		// 修改登录密码
		Base_ManageHomeChangePwd
	} from '@/api/interface.js'
	export default {
		data() {
			return {
				// 加载中
				loading: false,
				entity: {},
				rules: {
					Phone: {
						rules: [{
							required: true,
							errorMessage: '请填写手机号',
						}, {
							validateFunction: (rule, value, data, callback) => {
								if (!regPhone.test(value)) return callback('手机号格式错误')
								return true
							}
						}]
					},
					rpw: {
						rules: [{
							required: true,
							errorMessage: '请再次填写密码',
						}, {
							validateFunction: (rule, value, data, callback) => {
								console.log(data);
								if (value !== data.Password) return callback('两次密码不一致')
								return true
							}
						}]
					},
				}
			}
		},
		methods: {
			// 修改密码保存
			handleSubmitDetailSave() {
				var that = this
				this.$refs.form.validate().then(res => {
					// 判断新旧密码是否相同
					if (that.entity.oldPwd === that.entity.newPwd) {
						that.$errorToast('新密码不能和旧密码相同')
						return
					}
					// 判断两次密码输入是否一致
					if (that.entity.newPwd !== that.entity.newPwd1) {
						that.$errorToast('两次密码输入不一致，请重新输入')
						return
					}
					this.$utils.showConfirm({
						content: '确认后密码将变更，是否继续?',
						confirmText: "确认",
					}).then(res => {
						if (res.confirm) {
							that.loading = true
							uni.showLoading({
								title: '修改中'
							})
							Base_ManageHomeChangePwd(that.entity).then(resJson => {
								if (resJson.Success) {
									that.$sucessToast("修改成功");
									setTimeout(function() {
										uni.redirectTo({
											url: "/pages/Login/Login"
										})
										that.loading = false
										uni.hideLoading()
									}, 1300)

								} else {
									setTimeout(function() {
										that.loading = false
										uni.hideLoading()
									}, 1300)
									that.$errorToast(resJson.Msg);
								}
							})
							console.log('修改密码保存了', that.FormData)

						} else {
							uni.hideLoading()
						}
					})
				}).catch(err => {
					console.log(err);
				})



			},
		}
	}
</script>

<style scoped lang="less">
	/* 设置 label 的样式 */
	::v-deep.uni-forms-item {
		padding-right: 40rpx !important;
		// margin-bottom: 15rpx !important;

		/* 例如，设置 label 的宽度和对齐方式 */
		.uni-forms-item__label {
			display: flex !important;
			justify-content: flex-end !important;
		}
	}

	.container {
		.submitButton {
			// z-index: 99;
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			height: 100rpx;
			/*暂时发现安卓小屏手机安全区为0 && 不带单位的话padding-bottom会失效，写一个兜底, 并写在最上面；f12发现css样式如果都给height设置样式，会依次往下，用最底下的一个样式，如果最下面的没失效，依次往上查找，所以兜底的写在最上面 */
			height: calc(130rpx + constant(safe-area-inset-bottom));
			/* 直接扩展高度，因为padding-bottom是内边距 */
			height: calc(130rpx + env(safe-area-inset-bottom));
			/* 直接扩展高度 */
			background: #fff;
			padding-top: 10rpx;
			box-sizing: border-box;
			padding-bottom: constant(safe-area-inset-bottom);
			/*兼容 iOS<11.2 */
			padding-bottom: env(safe-area-inset-bottom);
			/* 兼容iOS>= 11.2*/
			border-top: 1px solid #e9e9e9;
			padding-left: 15px;
			padding-right: 15px;
		}
	}
</style>